<!-- 多视角观察窗组件 -->
<template>
  <div class="observation-area">
    <el-tabs v-model="activeViewTab" type="card" class="view-tabs">
      <!-- 平台视角 -->
      <el-tab-pane label="平台视角" name="platform">
        <PlatformView 
          :platform-data="platformData"
          @view-mode-change="handleViewModeChange"
          @center-map="handleCenterMap"
          @fullscreen="handleFullscreen"
        />
      </el-tab-pane>

      <!-- 信号视角 -->
      <el-tab-pane label="信号视角" name="signal">
        <SignalView 
          :signal-data="signalData"
          @spectrum-reset="handleSpectrumReset"
          @spectrum-export="handleSpectrumExport"
          @waveform-reset="handleWaveformReset"
          @waveform-export="handleWaveformExport"
        />
      </el-tab-pane>

      <!-- 电磁环境视角 -->
      <el-tab-pane label="电磁环境视角" name="electromagnetic">
        <ElectromagneticView 
          :electromagnetic-data="electromagneticData"
          @time-freq-reset="handleTimeFreqReset"
          @time-freq-mode-toggle="handleTimeFreqModeToggle"
          @relation-reset="handleRelationReset"
          @relation-export="handleRelationExport"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 导入子组件
import PlatformView from './PlatformView.vue'
import SignalView from './SignalView.vue'
import ElectromagneticView from './ElectromagneticView.vue'

// Props
defineProps({
  platformData: {
    type: Array,
    default: () => []
  },
  signalData: {
    type: Object,
    default: () => ({})
  },
  electromagneticData: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits([
  'view-tab-change',
  'platform-view-change',
  'platform-center',
  'platform-fullscreen',
  'signal-spectrum-reset',
  'signal-spectrum-export',
  'signal-waveform-reset', 
  'signal-waveform-export',
  'em-time-freq-reset',
  'em-time-freq-mode-toggle',
  'em-relation-reset',
  'em-relation-export'
])

// 当前激活的视角标签
const activeViewTab = ref('platform')

// 监听标签页切换
const handleTabChange = (tabName) => {
  emit('view-tab-change', tabName)
}

// 平台视角事件处理
const handleViewModeChange = (data) => {
  emit('platform-view-change', data)
}

const handleCenterMap = () => {
  emit('platform-center')
}

const handleFullscreen = () => {
  emit('platform-fullscreen')
}

// 信号视角事件处理
const handleSpectrumReset = () => {
  emit('signal-spectrum-reset')
}

const handleSpectrumExport = () => {
  emit('signal-spectrum-export')
}

const handleWaveformReset = () => {
  emit('signal-waveform-reset')
}

const handleWaveformExport = () => {
  emit('signal-waveform-export')
}

// 电磁环境视角事件处理
const handleTimeFreqReset = () => {
  emit('em-time-freq-reset')
}

const handleTimeFreqModeToggle = (mode) => {
  emit('em-time-freq-mode-toggle', mode)
}

const handleRelationReset = () => {
  emit('em-relation-reset')
}

const handleRelationExport = () => {
  emit('em-relation-export')
}

// 暴露当前激活的视角
defineExpose({
  activeViewTab
})
</script>

<style scoped>
.observation-area {
  flex: 1;
  padding: 0;
  background: #0a0f1b;
  position: relative;
  overflow: hidden;
}

.view-tabs {
  height: 100%;
}

.view-tabs :deep(.el-tabs__header) {
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
  margin: 0;
}

.view-tabs :deep(.el-tabs__content) {
  height: calc(100% - 5vh);
  padding: 0;
}

.view-tabs :deep(.el-tab-pane) {
  height: 100%;
}

.view-tabs :deep(.el-tabs__item) {
  color: #bfcbd9 !important;
  background: transparent !important;
  border-color: #2d3a4b !important;
}

.view-tabs :deep(.el-tabs__item.is-active) {
  color: #409EFF !important;
  background: #263445 !important;
  border-bottom-color: #409EFF !important;
}

.view-tabs :deep(.el-tabs__item:hover) {
  color: #409EFF !important;
}

.view-tabs :deep(.el-tabs__active-bar) {
  background-color: #409EFF !important;
}

/* Card类型标签页样式调整 */
.view-tabs :deep(.el-tabs--card > .el-tabs__header) {
  border-bottom: 1px solid #2d3a4b;
}

.view-tabs :deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  border: none;
}

.view-tabs :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  border: 1px solid #2d3a4b;
  border-bottom: none;
  margin-right: 2px;
  border-radius: 0.6vh 0.6vh 0 0;
}

.view-tabs :deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  border-color: #409EFF #409EFF #409EFF #409EFF;
  border-bottom-color: #263445;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .view-tabs :deep(.el-tabs__item) {
    font-size: 0.9rem;
    padding: 0 1.5vw;
  }
}

@media (max-width: 768px) {
  .view-tabs :deep(.el-tabs__item) {
    font-size: 0.8rem;
    padding: 0 1vw;
  }
  
  .view-tabs :deep(.el-tabs__header) {
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  .view-tabs :deep(.el-tabs__nav-wrap) {
    overflow: visible;
  }
}
</style>